<template>
  <div class="box" :style="styleObj">
    <div v-if="showType == 1" class="new-user-box pa w100" @click="handleClick('newUserPrize')">
      <p class="count-down pa colorFFF fs11 text-c w100">
        <span class="colon pr">{{hh}}</span>
        <span class="colon pr">{{mm}}</span>
        <span>{{ss}}</span>
      </p>
    </div>
    <div v-else class="share-sign-box pa w100" @click="handleClick('shareSign')"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        hh: '00',
        mm: '00',
        ss: '00',
        time: '2020/5/10 12:00:00',
      }
    },
    props:['showType','styleObj'],// 1 新用户,2 分享领取礼品
    created() {
      let _this = this
      if(_this.showType == 1) {
//        setInterval(() => {
//          _this.countDown(this.time)
//        }, 1000)
        this.getToDay()
      }

    },
    methods: {
      handleClick(type) {
        this.$emit('topage',type)
      },
      getToDay() {
        let _this = this
        let day = new Date();
        day.setTime(day.getTime());
        let toDay = `${day.getFullYear()}/${day.getMonth()+1}/${day.getDate()} 23:59:59`;
        console.log('toDay-- ',toDay);
        setInterval(() => {
          _this.countDown(toDay)
        }, 1000)
      },
      //倒计时
      countDown(timer){
        let oDate = new Date();//获取日期对象
        let oldTime = oDate.getTime();//现在距离1970年的毫秒数
        let newDate = new Date(timer);
        let newTime = newDate.getTime();//2019年距离1970年的毫秒数
        let second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
//        let day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400;//余数代表剩下的秒数；
        let hour = Math.floor(second / 3600);//整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        let minute = Math.floor(second / 60);
        second %= 60;
//        this.day = this.formattingTime(day);
        this.hh = this.formattingTime(hour);
        this.mm = this.formattingTime(minute);
        this.ss = this.formattingTime(second);
      },
      formattingTime(n){
        return n >= 0 && n < 10 ? '0' + n : '' + n;
      },
    },
  }
</script>

<style scoped lang="scss">
@import "../assets/css/base.scss";

.box {
  position: fixed;
  /*right: 20px;*/
  /*top: 60%;*/
  z-index: 100;
  /*width: 66px;*/
  /*height: 72px;*/

  .new-user-box {
    top: 0;
    left: 0;
    height: 100%;
    background: url(~@/assets/img/share_sign_active/icon_new_user.png) no-repeat;
    background-size: 100% 100%;

    .count-down {
      bottom: 13px;
      left: 0;
      height: 20px;
      z-index: 101;

      span {
        margin-right: 2px;
      }

      span.colon::before {
        content:':';
        position: absolute;
        top: -1px;
        right: -4px;
      }
    }
  }

  .share-sign-box {
    height: 100%;
    background: url(~@/assets/img/share_sign_active/icon_share_sign.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
